<script>
export default {
  name: "Summary",
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      tab: 'first',
      drawer: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {
    showDetail() {
      this.drawer = true
    },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
    },
    drawerClose() {
      this.drawer = false
      this.pageNum = 1
      this.pageSize = 10
    },
  }
}
</script>

<template>
  <div class="report">
    <div class="card">
      <div class="title">
        <div class="text">全行汇总</div>
        <div class="download">下载<i class="el-icon-download"></i></div>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-top: 16px"
                :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
        <el-table-column prop="date" label="机构分布" align="center"></el-table-column>
        <el-table-column label="正式员工" align="center">
          <el-table-column prop="province" label="在岗" align="center"></el-table-column>
          <el-table-column prop="city" label="待岗" align="center"></el-table-column>
          <el-table-column prop="address" label="外派助业" align="center"></el-table-column>
          <el-table-column prop="zip" label="内退" align="center"></el-table-column>
          <el-table-column prop="date" label="合计" align="center"></el-table-column>
        </el-table-column>
        <el-table-column prop="date" label="劳务派遣" align="center"></el-table-column>
        <el-table-column prop="date" label="外包人员" align="center"></el-table-column>
        <el-table-column prop="date" label="总计" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="composite">
      <div class="card">
        <div class="title">
          <div class="text">机构分布</div>
          <div class="download">下载<i class="el-icon-download"></i></div>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 16px"
                  :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
          <el-table-column prop="date" label="机构分布" align="center"></el-table-column>
          <el-table-column label="正式员工" align="center">
            <el-table-column prop="province" label="在岗" align="center"></el-table-column>
            <el-table-column prop="city" label="待岗" align="center"></el-table-column>
            <el-table-column prop="address" label="外派助业" align="center"></el-table-column>
            <el-table-column prop="zip" label="内退" align="center"></el-table-column>
            <el-table-column prop="date" label="合计" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="劳务派遣" align="center"></el-table-column>
          <el-table-column prop="date" label="外包人员" align="center"></el-table-column>
          <el-table-column prop="date" label="总计" align="center"></el-table-column>
          <el-table-column label="其中：正式在岗员工变动情况" align="center">
            <el-table-column prop="province" label="上月" align="center"></el-table-column>
            <el-table-column prop="city" label="比上月" align="center"></el-table-column>
            <el-table-column prop="address" label="减少" align="center"></el-table-column>
            <el-table-column prop="zip" label="增加" align="center"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="card">
        <div class="title">
          <div class="text">变动情况</div>
        </div>
        <div style="margin-top: 16px">
          <el-select style="width: 100%" size="small" filterable></el-select>
        </div>
        <div style="margin-top: 16px;font-weight: 600">全行合计</div>
        <div style="margin-top: 16px">
          <el-tabs v-model="tab">
            <el-tab-pane label="正式员工" name="first">
              <div class="item" v-for="n in 6" :key="n" @click="showDetail">
                <div class="value">43</div>
                <div class="label">新签劳务合同</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="劳务派遣" name="second">
              <div class="item" @click="showDetail">
                <div class="value">43</div>
                <div class="label">增加</div>
              </div>
              <div class="item" @click="showDetail">
                <div class="value">43</div>
                <div class="label">减少</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="外包人员" name="third">
              <div class="item" @click="showDetail">
                <div class="value">43</div>
                <div class="label">增加</div>
              </div>
              <div class="item" @click="showDetail">
                <div class="value">43</div>
                <div class="label">减少</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-backtop target=".report"></el-backtop>

    <el-drawer :visible.sync="drawer" title="人员详情" size="50%" @close="drawerClose">
      <div style="padding: 0 20px">
        <div class="download" style="margin-bottom: 16px">下载<i class="el-icon-download"></i></div>
        <el-table :data="tableData" size="small"
                  :header-cell-style="{background: '#f8f8f8', color: '#716767'}">
          <el-table-column label="工号"></el-table-column>
          <el-table-column label="姓名"></el-table-column>
          <el-table-column label="性别"></el-table-column>
          <el-table-column label="职级"></el-table-column>
          <el-table-column label="员工来源"></el-table-column>
          <el-table-column label="机构"></el-table-column>
          <el-table-column label="部门"></el-table-column>
          <el-table-column label="岗位"></el-table-column>
          <el-table-column label="入行日期"></el-table-column>
        </el-table>
        <div style="margin-top: 16px;text-align: right">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="less">
/deep/ .el-drawer__header {
  color: #000000;
  font-weight: 600;
  font-size: 18px;
}

.report {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #f3f3f3;
  overflow-y: auto;

  .download {
    color: #cf3b73;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    i {
      margin-left: 4px;
      font-size: 16px;
    }
  }

  .card {
    background: #ffffff;
    border-radius: 6px;
    padding: 16px;

    .title {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #26292f;
      padding-left: 12px;
      position: relative;
      user-select: none;

      &:before {
        content: '';
        width: 4px;
        height: 100%;
        background: #cf3b26;
        position: absolute;
        left: 0;
        top: 0;
      }

      .text {
        flex: 1;
      }
    }
  }

  .composite {
    display: flex;
    width: 100%;
    margin-top: 16px;
    gap: 16px;

    .card:nth-child(1) {
      width: 80%;
    }

    .card:nth-child(2) {
      width: 20%;
    }

    .item {
      border-radius: 6px;
      margin: 8px 0;
      border: 1px solid #d7d7d7;
      padding: 16px;
      text-align: center;
      cursor: pointer;

      &:hover {
        border-color: #cf3b26;
      }

      .value {
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 8px;
      }

      .label {
        font-size: 16px;
      }
    }
  }
}
</style>